<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/layui/css/layui.css">
</head>
<body>
<%-- 搜索部分 --%>
<form class="layui-form layui-form-pane">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">客户名称</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="name" placeholder="客户名称" autocomplete="off">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="phone" placeholder="电话" autocomplete="off">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-inline">
                <select id="sex">
                    <option value="">性别</option>
                    <option value="1">男</option>
                    <option value="2">女</option>
                </select>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">公司</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="company" placeholder="公司" autocomplete="off">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <select id="deleted">
                    <option value="">状态</option>
                    <option value="1">有效</option>
                    <option value="2">无效</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">业务员</label>
            <div class="layui-input-inline">
                <select id="userId">
                    <option value="">业务员</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline">
                <button class="layui-btn" type="button" id="searchBtn">查询</button>
                <button class="layui-btn layui-btn-primary" type="reset">重置</button>
            </div>
        </div>
    </div>
</form>
<hr>
<%-- 数据表格 --%>
<table id="dataTable" lay-filter="dataTableFilter"></table>
<%-- 头工具栏模板 --%>
<script type="text/html" id="headBtns">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-sm" lay-event="add">
            <i class="layui-icon layui-icon-add-1"></i>新增
        </button>
        <c:if test="${user.role == 1}">
            <button class="layui-btn layui-btn-sm" lay-event="setSaleman">
                <i class="layui-icon layui-icon-set" ></i>设置业务员
            </button>
        </c:if>
    </div>
</script>
<%-- 行工具栏模板 --%>
<script type="text/html" id="rowBtns">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="edit">
            <i class="layui-icon layui-icon-edit"></i>修改
        </button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del">
            <i class="layui-icon layui-icon-delete" ></i>删除
        </button>
        <button class="layui-btn layui-btn-sm" lay-event="visit">
            <i class="layui-icon layui-icon-release" ></i>拜访
        </button>
    </div>
</script>
<%-- 编辑数据模板 --%>
<script type="text/html" id="eidtTpl">
    <form class="layui-form layui-form-pane" style="margin-left: 15px;margin-top: 15px" lay-filter="formFilter">
        <div class="layui-form-item">
            <label class="layui-form-label">客户名称</label>
            <div class="layui-input-inline">
                <input type="text" name="name" placeholder="名称" class="layui-input" autocomplete="off" lay-verify="required" lay-reqText="客户名称不能为空" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-inline">
                <input type="text" name="phone" placeholder="电话" class="layui-input" autocomplete="off" lay-verify="required|phone" lay-reqText="客户电话不能为空" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-inline">
                <input type="radio" name="sex" value="1" checked title="男"  >
                <input type="radio" name="sex" value="2"  title="女"  >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">公司</label>
            <div class="layui-input-inline">
                <input type="text" name="company" class="layui-input" autocomplete="off" lay-verify="required" lay-reqText="公司名称不能为空" >
            </div>
        </div>
        <button id="subBtn" type="button" lay-filter="subBtnFilter" style="display: none" lay-submit></button>
    </form>
</script>

<%-- 设置业务员模板 --%>
<script type="text/html" id="setSalemanTpl">
    <form class="layui-form layui-form-pane" style="margin-left: 15px;margin-top: 15px" lay-filter="formFilter">
        <div class="layui-form-item">
            <label class="layui-form-label">业务员</label>
            <div class="layui-input-inline">
                <select id="setUserId" name="userId">
                    <option value="">业务员</option>
                </select>
            </div>
        </div>
        <button id="subBtn" type="button" lay-filter="subBtnFilter" style="display: none" lay-submit></button>
    </form>
</script>

<%-- 新增拜访记录模板 --%>
<script type="text/html" id="addVistLogTpl">
    <form class="layui-form layui-form-pane" style="margin-left: 15px;margin-top: 15px" lay-filter="formFilter">
        <div class="layui-form-item">
            <label class="layui-form-label">客户名称</label>
            <div class="layui-input-inline">
                <input type="text" name="name" readonly class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">拜访时间</label>
            <div class="layui-input-inline">
                <input type="text" name="visitTime" lay-verify="required" lay-reqText="拜访时间不能为空"  id="visitTime" readonly class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-form-text" style="width: 300px">
            <label class="layui-form-label">拜访内容</label>
            <div class="layui-input-block">
                <textarea class="layui-textarea" name="descp"></textarea>
            </div>
        </div>
        <button id="subBtn" type="button" lay-filter="subBtnFilter" style="display: none" lay-submit></button>
    </form>
</script>



<script src="${pageContext.request.contextPath}/resources/layui/layui.js"></script>
<script>
    layui.use(['table','jquery','layer','form','laydate'],function () {
        let table = layui.table;
        let $ = layui.jquery;
        let layer = layui.layer;
        let form = layui.form;
        let laydate = layui.laydate;
        //获取所有的业务员  填充到下拉框中
        function  initSelect(selectId){
            //获取所有的业务员
            $.get("${pageContext.request.contextPath}/user.do?service=getAllSalesman",function (rs) {
                if(rs.code != 200){
                    layer.msg(rs.msg);
                    return false;
                }
                let select = $("#"+selectId);
                let salesmans = rs.data;//所有的业务员
                let options = "";
                for (salesman of salesmans){
                    let id = salesman.id;
                    let realname = salesman.realname;
                    options = options + "<option value='"+id+"'>"+realname+"</option>";
                }
                //插入到select中
                select.append(options);
                //重新渲染
                form.render("select")
            })
        }
        //初始化业务员下拉框
        initSelect("userId");
        //渲染数据表格
        let tabOpt = {
            id:"dataTableId",
            elem:"#dataTable",
            url:"${pageContext.request.contextPath}/customer.do?service=page",
            toolbar:"#headBtns",
            cols:[[
                {type:"checkbox"},
                {field:"name",title:"名称"},
                {field:"phone",title:"手机号"},
                {field:"sex",title:"性别",templet:function(d){
                        let sex = d.sex;
                        if (sex == 1){
                            return "<b style='color: #00FF00'>男</b>";
                        }else if(sex == 2){
                            return "<b style='color: #FD482C'>女</b>";
                        }
                    }},
                {field:"company",title:"公司"},
                {field:"deleted",title:"状态",templet:function(d){
                    let deleted = d.deleted;
                    if (deleted == 1){
                        return "<b style='color: #00FF00'>有效</b>";
                    }else if(deleted == 2){
                        return "<b style='color: #FD482C'>无效</b>";
                    }
                    }},
                {field:"realname",title:"业务员"},
                {field:"createTime",title:"创建时间"},
                {field:"deleteTime",title:"删除时间"},
                {title:"操作",toolbar:"#rowBtns",minWidth:300}
            ]],
            page:true,
            parseData:function(rs){
                return {
                    "code" : rs.code,
                    "msg": rs.msg,
                    "data":rs.data.data,
                    "count":rs.data.count
                }
            },
            response:{
                statusCode : 200
            }
        };
        let tabIns = table.render(tabOpt);

        //查询按钮
        $("#searchBtn").click(function () {
            let name  = $("#name").val();
            let phone  = $("#phone").val();
            let sex  = $("#sex").val();
            let company  = $("#company").val();
            let deleted  = $("#deleted").val();
            let userId  = $("#userId").val();
            debugger;
            tabIns.reload({
                where:{
                    "name":name,
                    "phone":phone,
                    "sex":sex,
                    "company":company,
                    "deleted":deleted,
                    "userId":userId
                }
            });
        });

        /**
         * 新增方法
         */
        function add() {
            let layOpt = {
                title:"编辑",
                type: 1,
                content:$("#eidtTpl").html(),
                area:['370px','370px'],
                btn:['确认','取消'],
                btnAlign: 'c',
                success:function (layer0,index) {
                    form.render("radio");
                    //表单提交监听
                    form.on("submit(subBtnFilter)",function (d) {
                        let formData = d.field;//表单数据
                        $.post("${pageContext.request.contextPath}/customer.do?service=add",formData,function (rs) {
                            layer.msg(rs.msg);
                            if (rs.code != 200){
                                return false;
                            }
                            //关闭弹出层
                            layer.close(index);
                            //重载表格数据 更新数据
                            $("#searchBtn").click();
                        })
                        return false;//阻止表单的默认提交行为
                    })
                },
                yes:function (index,layero) {
                    $("#subBtn").click();
                }
            };
            layer.open(layOpt)
        }

        //表格头工具栏监听事件
        table.on("toolbar(dataTableFilter)",function (d) {
            let event = d.event;
            if (event == "add"){
                //调用添加的方法
                add();
            }else if (event == "setSaleman"){
                //设置业务员
                setSaleman();
            }
        })
        /**
         *  设置业务员
         */
        function  setSaleman(){
            //获取选中的客户
            let checkData = table.checkStatus("dataTableId");
            let rows = checkData.data;//获取选中的行数据
            if (rows.length == 0) {
                layer.msg("请先选择客户!");
                return false;
            }
            //弹出一个层 显示所有的业务员
            layer.open({
                type:1,
                content:$("#setSalemanTpl").html(),
                area:['370px','370px'],
                btn:['确认','取消'],
                btnAlign:"c",
                success:function (layero,index) {
                    //初始化业务员下拉框
                    initSelect("setUserId");
                    //表单的提交
                    //表单提交监听
                    form.on("submit(subBtnFilter)",function (d) {
                        let formData = d.field;//表单数据  // userId  业务员ID
                        //客户ID  rows
                        let cIdsArr = new Array();//创建数组容器  装客户Id
                        for (let c of rows) {
                            let customerId = c.id;
                            cIdsArr.push("cId="+customerId);
                        }
                        //cId = 1 & cId= 2 这样的数据格式 发给 后台
                        let cIds = cIdsArr.join("&");
                        //发送更新数据的请求
                        $.post("${pageContext.request.contextPath}/customer.do?service=setSaleman&"+cIds,formData,function (rs) {
                            layer.msg(rs.msg);
                            if (rs.code != 200){
                                return false;
                            }
                            //关闭弹出层
                            layer.close(index);
                            //重载表格数据 更新数据
                            $("#searchBtn").click();
                        })
                        return false;//阻止表单的默认提交行为
                    })
                },
                yes:function (index,layero) {
                    $("#subBtn").click();
                }
            });


        }

        /**
         * 修改用户信息
         * @param rowData
         */
        function edit(rowData) {
            let layOpt = {
                title:"编辑",
                type: 1,
                content:$("#eidtTpl").html(),
                area:['370px','370px'],
                btn:['确认','取消'],
                btnAlign: 'c',
                success:function (layer0,index) {
                    form.render("radio");
                    //初始化表单数据
                    form.val("formFilter",rowData);
                    //表单提交监听
                    form.on("submit(subBtnFilter)",function (d) {
                        let formData = d.field;//表单数据
                        formData.id = rowData.id;//设置ID值
                        $.post("${pageContext.request.contextPath}/customer.do?service=update",formData,function (rs) {
                            layer.msg(rs.msg);
                            if (rs.code != 200){
                                return false;
                            }
                            //关闭弹出层
                            layer.close(index);
                            //重载表格数据 更新数据
                            $("#searchBtn").click();
                        })
                        return false;//阻止表单的默认提交行为
                    })
                },
                yes:function (index,layero) {
                    $("#subBtn").click();
                }
            };
            layer.open(layOpt)
        }

        /**
         * 删除客户
         * @param rowData
         */
        function del(rowData) {
            layer.confirm("确认要删除该客户吗?",function (index) {
                $.get("${pageContext.request.contextPath}/customer.do?service=delete",{id:rowData.id},function (rs) {
                    layer.msg(rs.msg);
                    if (rs.code != 200){
                        return false;
                    }
                    layer.close(index);//关闭弹出层
                    //刷新表格
                    $("#searchBtn").click();
                })
            })
        }
        //表格工具栏行监听事件
        table.on("tool(dataTableFilter)",function (d) {
            let event = d.event;
            let rowData = d.data;//行数据
            if (event == "edit"){
                edit(rowData);
            }else if(event == "del"){
                del(rowData);
            }else if (event == "visit"){
                visit(rowData);//新增拜访记录
            }
        })

        /**
         * 新增拜访记录
         */
        function  visit(rowData) {
            layer.open({
                type:1,
                content:$("#addVistLogTpl").html(),
                area:['340px','440px'],
                btn:['确认','取消'],
                btnAlign: 'c',
                success:function (layer0,index) {
                    //为表单赋值
                    form.val("formFilter",rowData);
                    //初始化时间组件
                    laydate.render({elem:"#visitTime",type:"datetime"})
                    //表单的提交监听
                    form.on("submit(subBtnFilter)",function (d) {
                        let formData = d.field;//表单数据
                        formData.customerId = rowData.id;//设置ID值 客户ID
                        $.post("${pageContext.request.contextPath}/visit.do?service=add",formData,function (rs) {
                            layer.msg(rs.msg);
                            if (rs.code != 200){
                                return false;
                            }
                            //关闭弹出层
                            layer.close(index);
                            //重载表格数据 更新数据
                            $("#searchBtn").click();
                        })
                        return false;//阻止表单的默认提交行为
                    })


                },
                yes:function (index,layero) {
                    $("#subBtn").click();
                }

            });
        }
    })
</script>
</body>
</html>
